import * as THREE from '../lib/three.module';
import { GUI } from "../lib/dat.gui.module.js";

const settings = {
  rotation: "0°",
  rotations: ["0°", "90°"],
  animation: "",
  animations: [],
  frontLights: 1,
  lightColor: 0xffffff,
  fogNear: 200,
  fogFar: 2000,
  fogColor: 0xffffff,
  backgroundColor: 0xffffff,
  meshColor: 0xffffff,
  autoRotate: true,
};
const rotationMap = {
  "0°": 0,
  "90°": 300,
};

const rotationParam = {
  x: 0,
  y: 0,
  z: 0,
};

// 旋转模型角度
const changeRotation = function (direction, rotationItem) {
  rotationParam[direction] = rotationMap[rotationItem];
  const { x, y, z } = rotationParam;
  this.modelObject.rotation.set(x, y, z);
  this.setPositionToFitGrid(this.modelObject);
};

// 选择执行的动画
const changeAnimation = function (animationName) {
  for (let i = 0, len = this.animationClip.length; i < len; i++) {
    const item = this.animationClip[i];
    if (item.name === animationName) {
      this.mixer.stopAllAction();
      this.actions[i].play();
      return;
    }
  }
};

// 调整光照强度
const changeIntensity = function (direction, intensity) {
  if (direction === 'frontend') {
    this.dirLight.intensity = intensity;
  } else {
    this.dirLightBack.intensity = intensity;
  }
};
const changeLightColor = function (direction, color) {
  if (direction === 'frontend') {
    this.dirLight.color.set(color);
  } else {
    this.dirLightBack.color.set(color);
  }
};

const createPanel = function (layers) {
  const _this = this;
  const panel = new GUI({ width: 310 });
  const folder1 = panel.addFolder("模型角度");
  const folder2 =
    this.actions && this.actions.length > 0
      ? panel.addFolder("模型动作")
      : null;
  const folder3 = panel.addFolder('前景灯');
  const folder4 = panel.addFolder('后景灯');
  const folder5 = panel.addFolder('背景');

  folder1
    .add(settings, "rotation")
    .options(settings.rotations)
    .name("X轴旋转角度")
    .onChange(changeRotation.bind(this, 'x'));
  folder1
    .add(settings, "rotation")
    .options(settings.rotations)
    .name("Y轴旋转角度")
    .onChange(changeRotation.bind(this, 'y'));
  folder1
    .add(settings, "rotation")
    .options(settings.rotations)
    .name("Z轴旋转角度")
    .onChange(changeRotation.bind(this, 'z'));
  folder1.open();

  if (folder2) {
    settings.animations = this.animationClip.map((item) => item.name);
    settings.animation = settings.animations[0];
    folder2
      .add(settings, "animation")
      .options(settings.animations)
      .name("选择动作")
      .onChange(changeAnimation.bind(this));
    folder2.open();
  }
  // 模型提供的控制面板操作
  if (layers && layers.length > 0) {
    const layersControl = panel.addFolder('layers');
    layersControl.open();
    for (let i = 0; i < layers.length; i++) {
      const layer = layers[i];
      layersControl.add(layer, 'visible').name(layer.name).onChange(function (val) {
        const name = this.object.name;
        _this.scene.traverse(function (child) {
          if (child.userData.hasOwnProperty('attributes')) {
            if ('layerIndex' in child.userData.attributes) {
              const layerName = layers[child.userData.attributes.layerIndex].name;
              if (layerName === name) {
                child.visible = val;
                layer.visible = val;
              }
            }
          }
        });
      });
    }
  }

  folder3.add(settings, 'frontLights', 0, 1, 0.1)
    .name('前景灯光强度')
    .onChange(changeIntensity.bind(this, 'frontend'));
  folder3.addColor(settings, 'lightColor')
    .name('灯光颜色')
    .onChange(changeLightColor.bind(this, 'frontend'));
  folder3.open();

  folder4.add(settings, 'frontLights', 0, 1, 0.1)
    .name('后景灯光强度')
    .onChange(changeIntensity.bind(this, 'back'));
  folder4.addColor(settings, 'lightColor')
    .name('灯光颜色')
    .onChange(changeLightColor.bind(this, 'back'));
  folder4.open();

  folder5.addColor(settings, 'backgroundColor').name('背景颜色').onChange(e => {
    _this.scene.background = new THREE.Color(e);
  });
  folder5.add(settings, 'fogNear', 20, 300, 10).name('雾化最小距离').onChange(e => {
    _this.scene.fog = new THREE.Fog(settings.fogColor, e, settings.fogFar);
  });
  folder5.add(settings, 'fogFar', 300, 2000, 10).name('雾化最大距离').onChange(e => {
    _this.scene.fog = new THREE.Fog(settings.fogColor, settings.fogNear, e);
  });
  folder5.addColor(settings, 'fogColor').name('雾化颜色').onChange(e => {
    _this.scene.fog = new THREE.Fog(e, settings.fogNear, settings.fogFar);
  });
  folder5.addColor(settings, 'meshColor').name('地面颜色').onChange(e => {
    _this.mesh.material.color.set(e);
  });
  folder5.open();

  panel.add(settings, 'autoRotate').name('自动旋转').onChange(e => {
    _this.controls.autoRotate = e;
  });

  panel.close(); // 默认关闭
};

export default createPanel;
